<template>
	<view class="">
		
		<view class="main-wrap" :class="{show:loaded}">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :enablePullDown="false" :pullUp="loadData" :back-top="true">
				<view class="home-top-con" >
					<view class="row  between index-top-c">
						<view class="row" @tap="navTo('/pages/leader/list',{login:true})">
							<u-icon name="/static/img/wzb.png" size="25"></u-icon>
							<text class="f13" style="margin-left: 10rpx;">团长:{{ leader.name ? leader.name : '暂未绑定' }}</text>
						</view>
						<view class="row" @tap="navTo('/pages/leader/list',{login:true})">
							<view class="">|</view>
							<text class="f13" style="margin: 0 20rpx;">{{ leader.name ? '切换' : '请选择' }}</text>
							<u-icon name="arrow-right" color="#ffffff" size="13"></u-icon>
						</view>
						<view class="share-con row center">
							<u-icon name="/static/img/fxb.png" size="30"></u-icon>
							<button open-type="share" class="share-btn"></button>
						</view>
					</view>
					<mix-search bgColor="#2781a7" iconColor="#666666" placeholder="placeholderw"></mix-search>
				</view>
				<view class="wrap">
					<swiper autoplay circular>
						<swiper-item class="swiperItem" v-for="(item, index) in swiperList" :key="index" @click="bannerItemTap(item)"><image :src="item.pic"></image></swiper-item>
					</swiper>
				</view>
				<view class="mid-con">
					<view class="scroll-view-con">
						<scroll-view scroll-x="true" ref="scrollView" class="scrollview">
							<view class="item-scroll" v-for="(item, index) in categoryList" :key="index" @tap="onClickScrollItem(item, index)">
								<view class="row center fill"><image :src="item.icon" class="item-scroll-img"></image></view>
								<view class="item-scroll-title clamp" style="padding-top: 20upx;">{{item.name}}</view>
							</view>
						</scroll-view>
					</view>
					<u-grid col="4" :border="false">
						<u-grid-item v-for="(v, k) in 4" :key="k" @click="onClickGridItem(v, k)"><image src="/static/img/czyl.png" mode="" class="f-img"></image></u-grid-item>
					</u-grid>
				</view>
				<page-item-index :list="dataList"></page-item-index>
			</s-pull-scroll>
			<drag-button :isDock="true" @btnClick="btnClick"></drag-button>
		</view>
		
		
		<mix-cart ref="mixCart"></mix-cart>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>
<script>
import mixSearch from '@/components/mix-search/index.vue';
import pagesItem from '@/components/page-item-list/page-goos-item.vue';
import mixCart from '@/components/mix-cart/index.vue';
import pageItemIndex from '@/components/page-item-list/index.vue';
import dragButton from '@/components/drag-button/drag-button.vue';
export default {
	components: {
		dragButton,
		mixCart,
		pagesItem,
		mixSearch,
		pageItemIndex
	},
	data() {
		return {
			leader: {},
			dataList:[],
			swiperList:[],
			categoryList:[]
		};
	},
	onLoad(options) {
		if (options.inviteId) {
			getApp().globalData.inviteId = options.inviteId;
		}
		if (options.q) {
			let inviteId = decodeURIComponent(options.q)
				.split('?')[1]
				.split('=')[1];
			getApp().globalData.inviteId = inviteId;
		}
		uni.setStorageSync('uid',1);
		this.getHomeSwiper();
		this.getHomeCategory();
		this.refresh();
	},
	onShareAppMessage() {
		return {
			path: `/pages/tabs/home?inviteId=${uni.getStorageSync('uid')}`
		};
	},
	methods: {
		onClickScrollItem(v, k) {
			if (k == 0) {
				this.navTo(`/pages/public/companyIntroduction`,{login:true});
			} else {
				this.navTo(`/pages/tabs/groList?id=${v.id}&index=${k}`,{login:true});
			}
		},
		onClickGridItem(v, k) {
			if (k == 0) {
				this.navTo(`/pages/public/card`,{login:true});
			}else if(k==1){
				this.navTo(`/pages/public/topUp`,{login:true});
			}else{
				let title=k==2?"赔付标准":"服务范围";
				this.navTo(`/pages/public/aboutwe?type=${k}&title=${title}`);
			}
		},
		btnClick() {
			this.$refs.mixCart.open();
		},
		pullDown(pullScroll) {
			setTimeout(() => {
				this.loadData(pullScroll);
			}, 200);
		},
		async getHomeCategory(){
			const res = await this.$request('goods/category-list-fir', {});
			if (res.result == 0) {
				this.categoryList=res.dataList;
				getApp().globalData.categoryList=res.dataList;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async getHomeSwiper(){
			const res = await this.$request('content/slide-show', {});
			if (res.result == 0) {
				this.swiperList=res.dataList;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async loadData(pullScroll) {
			const data = {
				uid: uni.getStorageSync('uid'),
				type:0,
				pageNo: pullScroll.page,
				pageSize: '9'
			};
			const res = await this.$request('goods/list', data, { showLoading: true });
			if (pullScroll.page == 1) this.dataList = [];
			if (res.result == 0) {
				this.dataList = this.dataList.concat(res.data.list);
				pullScroll.endByPage(Math.ceil(res.data.count / 9), res.data.list);
			} else {
				this.$util.msg(res.resultNote);
			}
		}
	}
};
</script>
<style>
page {
	background: #f6f6f6;
}
</style>
<style scoped lang="scss">
.share-con {
	position: relative;
	width: 30upx;
	height: 30upx;
}
.share-btn {
	position: absolute;
	top: 0;
	left: 0;
	width: 30upx;
	height: 30upx;
	opacity: 0;
	z-index: 99;
}
.home-top-con {
	height: 300upx;
	background: #2781a7;
	width: 100%;
}
.index-top-c {
	height: 66upx;
	padding: 0 20upx;
	color: #ffffff;
}
.wrap {
	padding: 0 20upx;
	margin-top: -120upx;
}
.swiperItem {
	border-radius: 20upx;
	overflow: hidden;
	image {
		width: 100%;
		height: 300rpx;
	}
}
.mid-con {
	width: 710rpx;
	margin: 40rpx auto;
	background: #ffffff;
	padding: 20rpx;
	border-radius: 20rpx;
}
.f-img {
	width: 156rpx;
	height: 139rpx;
}
.scrollview {
	white-space: nowrap;
}
.scroll-view-con {
	padding-top: 20upx;
}
.item-scroll {
	border-radius: 10upx;
	overflow: hidden;
	display: inline-block;
	margin-right: 20upx;
	width: 120upx;
	position: relative;
}
.item-scroll:last-child {
	margin-right: 0;
}
.item-scroll-img {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}
.item-scroll-title {
	width: 120upx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	text-align: center;
}
</style>
